import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import {log} from "../../../../../utils/commonfunc";
import makeRoomSrc from '../../../../../res/images/web/vip-room/创建包厢@2x.png'
import {addVipRoomReq, getVipRoomInfoReq} from "../../../../../apis/goApis";
import LocalStorageService from "../../../../../utils/LocalStorageService";
import CustomBotton from "../../../../../shared-components/CustomButton/CustomBotton";
import {Modal, Toast} from "antd-mobile";
import './vip-room.css'
import {encryptPwd} from "../../../../../utils/encryptService";
import VipRoomCard from "./vip-room-card/vip-room-card";
import VipRoomCardNow from "./vip-room-card-now/vip-room-card-now";

class VipRoom extends React.Component {
    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.matchId = parseInt(this.props.match.params.gameId)
        this.state = {
            myRooms: [],
            myOtherRooms: [],
            inRooms: [],
            historyRooms: [],
            empty: true,
            modal: {
                add: false,
            },
            roomName: '',
            password: '',
        }
    }

    componentDidMount() {
        this.getInfo()
    }

    getInfo = () => {
        getVipRoomInfoReq({
            Uid: this.uid,
            Namiid: this.matchId,
        })
            .then(res => {
                if (res.data.ok) {
                    const {
                        r1,
                        r2,
                        r3,
                        r4
                    } = res.data
                    this.setState({
                        myRooms: r1,
                        myOtherRooms: r2,
                        inRooms: r3,
                        historyRooms: r4,
                        empty: [r1, r2, r3, r4,].every(r => r.length === 0)
                    })
                }
            })
    }

    onAddRoom = () => {
        if (this.state.roomName.length === 0) {
            Toast.fail('请输入包厢名称')
            return
        }
        addVipRoomReq({
            Name: this.state.roomName,   // string `binding:"required"` //包厢名
            Pwd: encryptPwd(this.state.password),    // string //md5后的密码
            Namiid: this.matchId, // int    `binding:"required"`
            Uid: this.uid,    // string `binding:"required"` //用户id
        })
            .then(res => {
                log('add res is', res.data)
                if (res.data.ok) {
                    this.cancelModal('add')
                    this.getInfo()
                }
            })
    }

    showModal = (key) => {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal = (key) => {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: false,
            }
        })
    }

    onInputChange = (event, key) => {
        this.setState({
            [key]: event.target.value,
        })
    }


    render() {
        const user = this.props.user

        const dataEmpty = this.state.empty
        log("user", user)
        const myRooms = this.state.myRooms
        const myOtherRooms = this.state.myOtherRooms
        const inRooms = this.state.inRooms
        const historyRooms = this.state.historyRooms
        const bag = JSON.parse(user.Packet)
        let count = 0
        const vipCoupon = bag.find(item => item[0] === 30001)
        if (vipCoupon) {
            count = vipCoupon[1]
        }

        const myRoomTemplate = <div className='mg-t-16px'>
            <p className='mg-b-8px gray-text font-12'>当前比赛</p>
            <div className='flex-space-between flex-wrap-container'>
                {myRooms.map((room, index) => <VipRoomCardNow room={room} key={index}/>)}
            </div>
        </div>
        const myOtherTemplate = <div className='mg-t-16px'>
            <p className='mg-b-8px'>其他比赛</p>
            {myOtherRooms.map((room, index) => <VipRoomCard room={room} key={index}/>)}
        </div>
        const inTemplate = <div className='mg-t-16px'>
            <p className='mg-b-8px'>正在参与</p>
            {inRooms.map((room, index) => <VipRoomCard room={room} key={index}/>)}
        </div>
        const historyTemplate = <div className='mg-t-16px'>
            <p className='mg-b-8px'>历史参与</p>
            {historyRooms.map((room, index) => <VipRoomCard room={room} key={index}/>)}
        </div>

        const emptyTemplate = <div style={{textAlign: 'center',}}>
            <img src={makeRoomSrc} alt="" style={{width: '104px', height: '104px', marginTop: '70px', marginBottom: '10px',}}/>
            <p className='gray-text'>快创建你的包厢吧～</p>
            <div style={{width: '168px', margin: '36px auto 0', position: 'relative',}}>
                <span
                    style={{
                        position: 'absolute',
                        top: 0,
                        right: 0,
                        display: 'inline-block',
                        width: '48px',
                        height: '24px',
                        background: '#FA7268',
                        borderRadius: '13px',
                        color: '#fff',
                        textAlign: 'center',
                        lineHeight: '24px',
                        transform: 'translate(50%, -50%)',
                    }}
                >
                    {count}张券
                </span>
                <CustomBotton
                    bg='rgba(255, 165, 0, 1)'
                    extrastyle={{marginBottom: '8px',}}
                    onClick={() => this.showModal('add')}
                >创建VIP包厢</CustomBotton>
                <CustomBotton
                    bg='#fff'
                    color='rgba(51, 51, 51, 0.7)'
                >
                    获取包厢券
                </CustomBotton>
            </div>
        </div>


        const normalTemplate = <div style={{padding: '12px 16px',}}>
            <div className='flex-space-between-align-center'>
                <div>
                    <span>我的创建</span>
                    <span className='gray-text font-12'>（余{count}张券）</span>
                </div>
                <CustomBotton
                    size='mid'
                    bg='rgba(255, 165, 0, 1)'
                    extrastyle={{
                        width: '86px',
                        height: '28px',
                        borderRadius: '14px',
                        fontSize: '12px',
                        lineHeight: '28px',
                    }}
                    onClick={() => this.showModal('add')}
                >
                    +  创建包厢
                </CustomBotton>
            </div>
            {myRooms.length > 0 && myRoomTemplate}
            {myOtherRooms.length > 0 && myOtherTemplate}
            {inRooms.length > 0 && inTemplate}
            {historyRooms.length > 0 && historyTemplate}
        </div>

        const addModal = <Modal
            popup
            visible={this.state.modal.add}
            // onClose={() => this.onPopClose('gift')}
            onClose={() => this.cancelModal('add')}
            animationType="slide-up"
        >
            <div
                style={{
                    padding: '22px 16px',
                }}
            >
                <p style={{color: '#333', marginBottom: '16px',}}>创建VIP包厢</p>
                <p style={{marginLeft: '20px', marginBottom: '16px',}} className='text-align-left'>包厢名称</p>
                <input
                    className='add-room-input'
                    value={this.state.roomName}
                    onChange={(e) => this.onInputChange(e, 'roomName')}
                    placeholder='请输入包厢名称'
                />
                <p style={{marginLeft: '20px', marginBottom: '16px',}} className='text-align-left'>包厢密码</p>
                <input
                    className='add-room-input'
                    value={this.state.password}
                    onChange={(e) => this.onInputChange(e, 'password')}
                    placeholder='若没设置则无密码'
                />
                <div className='flex-space-between-align-center'>
                    <CustomBotton
                        bg='#fff'
                        extrastyle={{border: '2px solid #F8F8F8', marginRight: '4px',}}
                        color='rgba(51, 51, 51, 1)'
                        onClick={() => this.cancelModal('add')}
                    >
                        取消
                    </CustomBotton>
                    <CustomBotton
                        bg={this.state.roomName.length > 0 ? 'rgba(255, 165, 0, 1)' : 'rgba(200, 200, 200, 1)'}
                        onClick={this.onAddRoom}
                    >
                        创建
                    </CustomBotton>
                </div>
            </div>
        </Modal>

        return <>
            {addModal}
            {dataEmpty ? emptyTemplate : normalTemplate}
        </>
    }
}

const mapState = state => ({
    user: state.user.userdetail,
})

export default connect(mapState)(withRouter(VipRoom))